<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset=utf-8>
		<title>LABS: Crear un menú fijo desplegable con efectos animados en jQuery</title>
		<link rel="stylesheet" href="css/MenuNav.css" type="text/css" media="all" />
        <link rel="stylesheet" href="css/services.css">
        <link rel="stylesheet" href="css/PopUp.css">
		<script language="javascript" src="js/jquery-1.11.0.min.js"></script> 
        <script language="javascript" src='js/jquery-ui.min.js'></script>
 <!--       <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js'></script> -->
		<script language="javascript" src="js/MenuNav.js"></script>
        <script language="javascript" src="js/jquery.jsPlumb-1.5.5.js"></script>
        <script language="javascript" src="js/services.js"></script>
		<script>
			$(document).ready(function () {
				$('nav').AnimatedPanelMenu();
			});
		</script>
        <script language="javascript" src="js/PopUp_Fade.js"></script>
	</head>
	<body>
        <header id="cabecera">
            <img src="imagenes/logost.png" height="100px" border="0" />
            <h4>Telf. 926 27 48 90</h4>
            <h4>Fax. 926 27 12 19</h4>
        </header>
            
		<nav>
		    <ul>
		        <li>
                    <a href="#" title="¿Quienes somos?">¿Quienes Somos?</a>
                    <div>
                        <div>
                            <img src="imagenes/menu/quienesSomos.jpg" align="left" border="0" />
                            <h2><b><u>Servicio de Telefonía de Ciudad Real, S.L.</u></b></h2>   
			                 <p align="justify">   Es una empresa con más de 15 años de experiencia en el sector de la informática y las telecomunicaciones, formada por diferentes profesionales dentro de la amplia variedad de servicios que ofrecemos a nuestros clientes.</p>

<p align="justify">Emplazados en Ciudad Real, entre los servicios que ofrecemos destacan la instalación de centralitas de telefonía 
digitales, analógicas e IP; sistemas de interconexión wireless, sistemas de videovigilancia, instalación de redes de comunicacion de datos e instalación de dispositivos sociosanitarios de teleasistencia.</p>

<p align="justify">En este último servicio, nuestra empresa ofrece diferentes posibilidades tanto a hospitales con un gran número de 
departamentos, como a residencias más pequeñas y necesitadas de un mayor control, brindando la posibilidad de instalar diferentes sistemas de alarmas o de controles de asistencia, presencia y control de errantes.</p>

<p align="justify">A pesar de todos los servicios anteriormente mencionados, nuestra empresa se diferencia del resto en el amplio 
servicio de mantenimiento que ofertamos a nuestros clientes, respondiendo a sus necesidades de una forma rápida y efectiva, ya que para nosotros los primero es el servicio a nuestros clientes.</p>

<p align="justify">Para todo ello utilizamos dispositivos de primeras marcas, como pueden ser Alcatel-Lucent, fulkwerk, spiker, 
netgear, d-link, Xacom, Ibernex, Pantel-Pancode, etc ...</p>
                        </div>
                        <div>
                            <h2></h2>
                        </div>
                    </div>
                </li>
		        <li>
		        	<a href="#" title="Productos">Productos</a>
		        	<div>
		        		<div>
			        		<h2>Productos</h2>
			        		<ul>
			        			<li><a href="#" title="Producto">Producto 1</a></li>
			        			<li><a href="#" title="Producto">Producto 2</a></li>
			        			<li><a href="#" title="Producto">Producto 3</a></li>
			        			<li><a href="#" title="Producto">Producto 4</a></li>
			        			<li><a href="#" title="Producto">Producto 5</a></li>
			        		</ul>
		        		</div>
		        		<div>
			        		<h2>Destacados</h2>
			        		<ul>
			        			<li><a href="#" title="Destacado">Destacado 1</a></li>
			        			<li><a href="#" title="Destacado">Destacado 2</a></li>
			        			<li><a href="#" title="Destacado">Destacado 3</a></li>
			        			<li><a href="#" title="Destacado">Destacado 4</a></li>
			        			<li><a href="#" title="Destacado">Destacado 5</a></li>
			        		</ul>
		        		</div>
		        	</div>
		        </li>
		        <li>
		        	<a href="#" title="Servicios">Servicios</a>
		        	<div>
		        		<div>
			        		<h2>Servicios</h2>
			        		<ul>
			        			<li><a href="#" title="Servicio">Servicio 1</a></li>
			        			<li><a href="#" title="Servicio">Servicio 2</a></li>
			        			<li><a href="#" title="Servicio">Servicio 3</a></li>
			        			<li><a href="#" title="Servicio">Servicio 4</a></li>
			        			<li><a href="#" title="Servicio">Servicio 5</a></li>
			        		</ul>
		        		</div>
		        		<div>
			        		<h2>Destacados</h2>
			        		<ul>
			        			<li><a href="#" title="Destacado">Destacado 1</a></li>
			        			<li><a href="#" title="Destacado">Destacado 2</a></li>
			        			<li><a href="#" title="Destacado">Destacado 3</a></li>
			        			<li><a href="#" title="Destacado">Destacado 4</a></li>
			        			<li><a href="#" title="Destacado">Destacado 5</a></li>
			        		</ul>
		        		</div>
		        	</div>
		        </li>
		        <li><a href="#" title="Sobre nosotros">Sobre nosotros</a></li>
		        <li><a href="#" title="Contacto">Contacto</a></li>
		    </ul>
		</nav>
        <div class="demo animation-demo" id="animation-demo">
            <img src="logos/globe3.png" height="525px" width="525px" border="0" id="globe"/>
            <div class="servicio" id="srv1">
                <img src="logos/blackberry_ball.png" height="50px" border="0" class="nodo"/>
				<div id="modal1" class="modal">
                    <img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>
            </div>
            <div class="servicio" id="srv2">
                <img src="logos/staff_ball.png" height="50px" border="0" class="nodo"/>
				<div id="modal2" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>                 
            </div>
            <div class="servicio" id="srv3">
                <img src="logos/bombilla_ball.png" height="35px" border="0" class="nodo1"/>
                <div id="modal3" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>
            <div class="servicio" id="srv4">
                <img src="logos/camera_ball.png" height="35px" border="0" class="nodo1"/>
                <div id="modal4" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>
            <div class="servicio" id="srv5">
                <img src="logos/enchufe_ball.png" height="50px" border="0" class="nodo"/>
                <div id="modal5" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>
            <div class="servicio" id="srv6">
                <img src="logos/fax_ball.png" height="50px" border="0" class="nodo2"/>
                <div id="modal6" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>
            <div class="servicio" id="srv7">
                <img src="logos/cruzroja_ball.png" height="35px" border="0" class="nodo1"/>
                <div id="modal7" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>
            <div class="servicio" id="srv8">
                <img src="logos/phone_ball.png" height="50px" border="0" class="nodo"/>
                <div id="modal8" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>
            <div class="servicio" id="srv9">
                <img src="logos/ring_ball.png" height="35px" border="0" class="nodo1"/>
                <div id="modal9" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>
            <div class="servicio" id="srv10">
                <img src="logos/rj11_ball.png" height="35px" border="0" class="nodo1"/>
                <div id="modal10" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>
            <div class="servicio" id="srv11">
                <img src="logos/taladro_ball.png" height="35px" border="0" class="nodo1"/>
                <div id="modal11" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>            
             <div class="servicio" id="srv12">
                <img src="logos/wireless_ball.png" height="50px" border="0" class="nodo2"/>
                 <div id="modal12" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>    
            <div class="servicio" id="srv13">
                <img src="logos/staff_ball.png" height="50px" border="0" class="nodo"/>
                <div id="modal13" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>  
            <div class="servicio" id="srv14">
                <img src="logos/camera_ball.png" height="35px" border="0" class="nodo1"/>
                <div id="modal14" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>  
            <div class="servicio" id="srv15">
                <img src="logos/camera_ball.png" height="35px" border="0" class="nodo1"/>
                <div id="modal15" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>  
            <div class="servicio" id="srv16">
                <img src="logos/camera_ball.png" height="35px" border="0" class="nodo1"/>
                <div id="modal16" class="modal">
					<img src="logos/Close.png" height="20px" class="closeBtn"/>
					<h2>Your Content Here</h2>
				</div>   
            </div>              
            
            <div class="servicio" id="tronco"></div>
            <div class="servicio" id="tronco1"></div>
            <div class="servicio" id="tronco2"></div>
            
            <div class="servicio" id="raiz"></div>
            <div class="servicio" id="raiz1"></div>
            <div class="servicio" id="raiz2"></div>
            <div class="servicio" id="raiz3"> </div>
         </div>
        <footer id="pie">
            Virole Software Architects Derechos Reservados &copy; 2013-2014.
        </footer>
	</body>
</html>
